<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ like }}</p>
    <button @click="change">改变</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';

const state = reactive({
  name: '李唯一',
  like: 'reactAndVue'
})

// 结构赋值无法做到响应式 
// let { name, like } = state

// toRefs可以将reactive对象中的所有属性转换为单独的响应式,并且这些ref仍然保持对象（依赖对象数据）的原有联系
let { name, like } = toRefs(state)

function change() {
  // like = 'vueAndAngular'
  like.value = 'vueAndAngular'
  console.log(state.like)
}
</script>

<style scoped></style>